<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="css/jquery.slider.css" />
		<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
		<script src="js/jquery.slider.min.js"></script>
		<style>
			body {
				background: #1f1e1e;
				font-family: "微软雅黑";
				color: #fff;
			}
			
			button {
				display: inline-block;
				padding: 6px 12px;
				line-height: 1.4;
				text-align: center;
				border: 1px solid transparent;
				border-radius: 4px;
				color: #fff;
				background-color: #5bc0de;
				border-color: #46b8da;
				cursor: pointer;
				font-size: 15px;
			}
			
			.container {
				width: 1080px;
				height: 600px;
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				margin: auto;
			}
			
			.demo1 {
				width: 48%;
				height: 100%;
				float: left;
				padding: 20px;
				border: 1px dashed #fff;
				border-radius: 4px;
				box-sizing: border-box;
				position: relative;
			}
			
			.demo2 {
				width: 48%;
				height: 100%;
				float: right;
				padding: 20px;
				border: 1px dashed #fff;
				border-radius: 4px;
				box-sizing: border-box;
				position: relative;
			}
			
			.btns,
			.slider,
			.result {
				margin-bottom: 40px;
			}
			
			pre {
				font-size: 13px;
			}
		</style>
	</head>

	<body>
		<div class="container">
			<div class="demo1">
				<div class="btns">
					<button id="reset1">还原</button>
				</div>
				<div id="slider1" class="slider"></div>
				<div class="result">验证结果：<span id="result1"></span></div>
				<div>参数：</div>
				<pre>
$("#slider1").slider({
	callback: function(result) {
		$("#result1").text(result);
	}
});
				</pre>
			</div>
			<div class="demo2">
				<div class="btns">
					<button id="reset2">还原</button>
				</div>
				<div id="slider2" class="slider"></div>
				<div class="result">验证结果：<span id="result2"></span></div>
				<div>参数：</div>
				<pre>
$("#slider2").slider({
	width: 340, // width
	height: 40, // height
	sliderBg:"rgb(134, 134, 131)",// 滑块背景颜色
	color:"#fff",// 文字颜色
	fontSize: 14, // 文字大小
	bgColor: "#33CC00", // 背景颜色
	textMsg: "按住滑块，拖拽验证", // 提示文字
	successMsg: "验证通过了哦", // 验证成功提示文字
	successColor: "red", // 滑块验证成功提示文字颜色
	time: 400, // 返回时间
	callback: function(result) { // 回调函数，true(成功),false(失败)
		$("#result2").text(result);
	}
});
				</pre>
			</div>
		</div>
		<script>
			$("#slider1").slider({
				callback: function(result) {
					$("#result1").text(result);
				}
			});

			$("#slider2").slider({
				width: 340, // width
				height: 40, // height
				sliderBg: "rgb(134, 134, 131)", // 滑块背景颜色
				color: "#fff", // 文字颜色
				fontSize: 14, // 文字大小
				bgColor: "#33CC00", // 背景颜色
				textMsg: "按住滑块，拖拽验证", // 提示文字
				successMsg: "验证通过了哦", // 验证成功提示文字
				successColor: "red", // 滑块验证成功提示文字颜色
				time: 400, // 返回时间
				callback: function(result) { // 回调函数，true(成功),false(失败)
					$("#result2").text(result);
				}
			});

			// 还原
			$("#reset1").click(function() {
				$("#slider1").slider("restore");
			});

			$("#reset2").click(function() {
				$("#slider2").slider("restore");
			});
		</script>
	</body>

</html>